<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#app{
				padding: 30px;
			}
			.myselect{
				width: 200px;
				margin-right: 15px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>班级</h1>


			
			
			<select class="layui-form-label myselect layui-bg-green">
				<option value ="-1">请选择班级</option>
				<option value ="30" v-for="(item,index) in classs">
							{{item.name}}
				</option>
				
			</select>
			<select class="layui-form-label myselect layui-bg-green" >
				<option value ="-1">请选择课程</option>
				<option value ="30" v-for="(item,index) in course">
							{{item.cname}}
							
				</option>
				
			</select>
			
			<button type="button" 	class="layui-btn layui-btn-normal" @click="get()">查询</button>
				
				<div id="class_table">
					
					<table class="layui-table">
					  <colgroup>
					    <col width="150">
					    <col width="200">
					    <col>
					  </colgroup>
					  <thead>
					    <tr>
					      <th>学号</th>
					      <th>姓名</th>
					      <th>成绩</th>
						  <th>修改</tr> 
					  </thead>
					  
					  <thead v-for="(item , index) in banji">
					    <tr>
							<th>{{item.id}}</th>
					      <th>{{item.userName}}</th>
						  <th>{{item.userName}}</th>
					      <!-- <th>{{item.achievement}}</th> -->
						  <th><button type="button" class="layui-btn layui-btn-primary">修改</button></th>
					    </tr> 
					  </thead>
					  
					</table>
					
				</div>


		</div>
	</body>
	<script type="text/javascript">
		
		new Vue({
			el:'#app',
			data:{
				classs:[{count: 60,id: 1,name: "网络本18"}],
				course:[],
				//存储选中的班级跟课程id
				cId:-1,
				rId:-1,
				ccc:'请选择课程',
				banji:[{id:'',userName:'张三',achievement:'男'}],
			},
			methods:{
				get(){
					console.log(this.ccc)
				},
					
					//获取全校所有的班级
					getAllClass(){
						
						axios
						      .post('http://localhost:8080/getAllClass.action')
						      .then(response => 
							  {
							  			this.classs=response.data
							  			console.log(response)
							  })
							  
						      .catch(function (error) { // 请求失败处理
						        console.log(error);
						      });
						
					},
					//获取全校所有的课程
					getAllCourse(){
						
						axios
						      .post('http://localhost:8080/getAllCourse.action')
						      .then(response => 
							  {
							  			console.log(response)
										this.course=response.data
							  			
							  })
					},
					//向服务器发送查询
					getCourse(){
						axios.post('http://localhost:8080/getResult.action', {	
						    rId:this.course.id,
							cId:this.classs.cid
						  })
						  .then(function (response) {
						    console.log(response);
						  })
						  .catch(function (error) {
						    console.log(error);
						  });
					}
					
			},
			mounted:function(){
				this.getAllCourse()
				this.getAllClass()
			}
		})
	</script>
</html>
